Skip to content

Conversation

zehjotkah
Copy link

Description

allowing toLowerCase(), replace(), and split() to be used in the expression editor.

Real life use-case explained in the discord message.
https://discord.com/channels/955905230107738152/1418928616648998992/1419623805541814393

Steps for reproduction

  1. use any of the mentioned functions in the expression editor
  2. they're currently not allowed even though they'd be safe to use
  3. those functions (and presumably others as well) can be used in hosted webstudio by deploying my changes on a locally hosted webstudio editor, using the functions, and copying the pages containing the functions to the hosted version.
    -> validation check bypass

Code Review

  • hi @kof, I need you to do
    • conceptual review (does webstudio WANT to allow these functions?)
    • test it on preview

Before requesting a review

  • made a self-review
  • added inline comments where things may be not obvious (the "why", not "what")

Before merging

  • tested locally and on preview environment (preview dev login: 0000)
  • updated test cases document
  • added tests
  • if any new env variables are added, added them to .env file

@zehjotkah zehjotkah changed the title enabling safe functions in expression engine feat: enabling safe functions in expression engine Sep 23, 2025
@kof
Copy link
Member

kof commented Sep 23, 2025

My only wish is that we would support the entire js there and not a few functions, because:

  1. we can't tell this is just javascript without it
  2. AI won't be able to help unless it knows the whitelisted functions
  3. people will always ask why X works and Y doesn't

@zehjotkah
Copy link
Author

I'd love webstudio to support the entire js in the expression editor!
With this PR I wanted to make the minimum changes necessary for my usecase.

@zehjotkah
Copy link
Author

zehjotkah commented Sep 24, 2025

My only wish is that we would support the entire js there and not a few functions, because:

1. we can't tell this is just javascript without it

2. AI won't be able to help unless it knows the whitelisted functions

3. people will always ask why X works and Y doesn't

That's a fair point. A random list of functions is confusing, and you're right, people will always wonder why one thing works and another doesn't.

The problem with allowing everything is the security risk, right? Stuff like fetch or accessing document could open up XSS holes, and things like while(true){} could crash the builder, if I understand it correctly.

So what if we set a clear rule for what's allowed? We could support all the standard methods on primitives (Strings, Arrays, etc.) as long as they don't mutate the original data.

That way, it feels like you're just writing JavaScript for data manipulation. Methods like .map() or .slice() would be fine, but something like .pop() or .splice() wouldn't, because they change the original array and could cause weird side effects.

My PR for split(), replace(), and toLowerCase() fits this rule. It solves a real problem for building dynamic pages. Right now, those functions do work if you paste them in from a local webstudio fork where the validation check is turned off, so the linter is already out of sync with the runtime.

What do you think? I'm happy to expand the PR to include more of these "safe" methods if you agree on this as the general rule.

…y methods

This pull request enhances the expression engine to support a curated list of safe, non-mutating methods on the String and Array prototypes.
added optional chaining and additional tests.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants